<script lang="ts">

  export default {
    data(){
      return {
        message:"helloworld",
        person:[{
          name: 'John',
          age: 30,
          job: 'Developer',
          sex:'女'
        },
          {
          name: 'tom',
          age: 20,
          job: 'Developer',
          sex:'女'
        }],
        href:"<a href='https://github.com/John'>github</a>",
        red:"redClass",
        flag:true
      }
    },
    methods:{

    }
  }
</script>

<template>
 <div>
   <ul>
<!--     <li v-for="(value, key) in person" :key="key">
       {{ key }}: {{ value }}
     </li>-->
     <li v-for="(v,k) in person" :key="k">
       {{k}} - {{v}}
     </li>
   </ul>
   <br>
   {{message}}
   <br>
   <br>
   <span v-html="href"></span>
   <br>
   <br>
   <span v-text="href"></span>
   <br>
   <br>
   <button @click="getdata">点击我</button>
   <br>
   <br>
   <span v-bind:class="red">红色</span>
   <br>
   <br>
   <div v-if="flag">你能看见我吗</div>
 </div>
</template>

<style scoped>
  .redClass{
    color: red;
  }
</style>